<template>
  <div>
    <div @click="back">
      <van-nav-bar left-text="返回" left-arrow title="垃圾分类" />
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in img" :key="item.id">
        <img :src="'http://124.93.196.45:10001/'+item.imgUrl" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="4">
      <van-grid-item v-for="(item, index) in listLj" :key="index" icon="photo-o">
        <span class="size" @click="gotonew(item.id)">{{ item.name }}</span>
      </van-grid-item>
    </van-grid>
    <div class="chabu" @click="gotoL"> 点击查看详细垃圾分类 </div>
    <div v-if="flag">
      <div class="fath" v-for="item in detailnewlist" :key="item.id">
        <img :src="'http://124.93.196.45:10001/'+item.imgUrl" alt />
        <p>
          <span class="biao">标题:</span>
          <span class="name">{{item.title}}</span>
        </p>
        <span class="ze">作者:</span>
        <span class="small">{{item.author}}</span>
        <button @click="gotop(item.id)">点击了解详情</button>
        <p>
          <span class="shiji">
            <span class="shiy">发布时间</span> :
          </span>
          <span class="timer">{{item.createTime}}</span>
        </p>
        <div class="kanpl" @click="pllist(item.id)">&nbsp; 点击查看评论</div>
      </div>
    </div>
    <div v-else class="figelse">
      <div v-for="item in newlist" :key="item.id">
        <p class="title">{{item.title}}</p>
        <p>
          <img :src="'http://124.93.196.45:10001/'+item.imgUrl" alt @click="pinlun(item.id)" />
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import mixin from '@/mixin/flag'
import { NewsList, detail, lbpl, listnew } from '@/service/taxonomic'
export default {
  mixins: [mixin],
  computed: {
    ...mapState(['lvsID']),
  },
  data() {
    return {
      listLj: [],
      detailnewlist: [],
      img: [],
      newlist: [],
      flag: false,
    }
  },
  async created() {
    const res = await NewsList()
    this.listLj = res.data.rows
    const resT = await lbpl()
    this.img = resT.data.data
    const newl = await listnew()
    this.newlist = newl.data.data
  },
  methods: {
    async gotonew(id) {
      const arr = await detail({
        id,
      })
      this.detailnewlist = arr.data.rows
      if (arr.data.code == 200) {
        this.flag = true
      }
    },
    gotop(id) {
      this.$store.commit('changlvId', id)
      this.$router.push('./designateView')
    },
    pinlun(id) {
      console.log(id)
    },
    back() {
      this.$router.push('/')
    },
    pllist(Nid) {
      console.log(Nid)
      this.$store.commit('changlvId', Nid)
      this.$router.push('./commentsView')
    },
    gotoL(){
     this.$router.push('./GarbageSorting')
    }
  },
}
</script>

<style lang="scss" scoped>
.chabu{
  width: 100%;
  height: 40px;
  font-size: 15px;
  line-height: 40px;
  text-align: center;
  border: 1px solid pink;
}
.size {
  font-size: 14px;
}
.fath {
  width: 100%;
  height: 130px;
  border-bottom: 1px solid pink;
  img {
    width: 100px;
    height: 110px;
    float: left;
    padding-top: 9px;
    margin-right: 5px;
  }
  .small {
    font-size: 12px;
    color: red;
    margin-left: 5px;
  }
  .ze {
    font-size: 16px;
    margin-left: 5px;
  }
  .shiji {
    font-size: 16px;
    margin-left: 5px;
  }
  .timer {
    font-size: 12px;
    color: red;
    margin-left: 5px;
  }
  .biao {
    font-size: 17px;
    margin-left: 5px;
  }
  .name {
    font-size: 12px;
    color: red;
    margin-left: 5px;
  }
  .shiy {
    font-size: 15px;
  }
  button {
    width: 90px;
    height: 20px;
    background-color: pink;
    font-size: 12px;
    margin-left: 20px;
    border: 0;
  }
}
.figelse {
  width: 100%;
  height: 240px;
  .title {
    font-size: 14px;
    text-align: center;
    padding: 10px 0;
    font-weight: 800;
  }
  img {
    width: 100%;
    height: 240px;
  }
}
.kanpl {
  margin-top: 7px;
  font-size: 12px;
  color: red;
  margin-left: 10px;
}
</style>
